<template>
  <div>
    <div class="handle-code" v-html="code(details)">

    </div>
  </div>
</template>

<script>

export default {
  props:{
    details:{
      type:Object,
      require:true
    }
  },
  data(){
    return {

    }
  },
  // created(){
  //   console.info(this.details,'_details')
  // },
  methods:{
    code(value,em=0,count = {idx:1}){

      let res = "";
      const theme = (k,v) => `<span style="color: ${({ null:"#eee", str: '#66d9ef', num: '#6ac62e', idx: '#777', key: '#E6A23C', })[k]}">${v}</span>`
      
      const type = this.$isType(value);
      const emStr = new Array(em).fill('            ').join('');
      const getIdx = ()=>  theme('idx',count.idx++)  // 行数
      // 数组
      if (type === 'array') {
        res = `<p>${emStr}  [</p>`
        // res = `<p>${getIdx()}${emStr}  [</p>`
        for (let v of value) {
          const left = `<p>${emStr}            `;
          // const left = `<p>${getIdx()}${emStr}            `;
          res +=  (left + ( this.$isType( v) === 'object' || this.$isType( v) === 'array' ?  `</p>${this.code(v,em+1,count)}` : `${this.code(v,em+1,count)},</p>` )  );
        }
        res += `<p>${emStr}  ],</p>`
        // res += `<p>${getIdx()}${emStr}  ],</p>`
        
      }
      // 对象
      else if (type === 'object') {
        res = `<p>${emStr}  {</p>`
        // res = `<p>${getIdx()}${emStr}  {</p>`
        for (let k of Object.keys(value)) {
          const left = `<p>${emStr}            ${theme('key',`"${k}"`)} : `;
          // const left = `<p>${getIdx()}${emStr}            ${theme('key',`"${k}"`)} : `;
          res +=  (left + ( this.$isType( value[k]) === 'object' || this.$isType( value[k]) === 'array'  ?  `</p>${this.code(value[k],em+1,count)}` : `${this.code(value[k],em+1,count)},</p>` )  ) ;
        }
        res += `<p>${emStr}  },</p>`
        // res += `<p>${getIdx()}${emStr}  },</p>`
      }
      // 数字
      else if (type === 'number') res =  theme( 'num',value );
      // 字符串
      else if (type === 'string') res =   theme( 'str', `"${value}"` );
      // 其他的都改成null
      else res = theme( 'null','null' );
      return res;
      
    },
  }
}
</script>

<style lang="less" scoped>
  .handle-code::-webkit-scrollbar {
    background: rgba(255,255,255,0.2);
    width: 6px;
    height: 6px;
  }
  
  .handle-code::-webkit-scrollbar-thumb {
    background: #fff;
    opacity: 0.1;
    border-radius: 20px;
  }
  
  .handle-code::-webkit-scrollbar-button {
    display: none;
  }
  .handle-code{
    color: #ccc;
    white-space: pre-wrap;
    background: #272822 ;
    border-radius: 5px;
    font-family: 'PingFang Sc';
    max-height: 600px;
    overflow-y: auto;
    >p{
      padding: 0 20px;
      border-bottom: 1px dashed  #335;
      >span:first-child{
        display: inline-block;
        width: 36px;
        user-select: none;
      }
    }
  }
</style>